<template>
	<view class="production-detail-box"> 
		<view class="box-item">
			<navBar title="查看详情" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
			<view class="placeholder-box"></view>
			<view class="form-box-production">
				<view class="pro-item">
					<text class="item-label">项目/基地</text>
					<text class="item-value long">{{ detailObj.projectBaseName }}</text>
				</view>
				<view class="pro-item" v-if="detailObj.projectBaseType !== '基地' && detailObj.projectBaseType !== '高端加固'">
					<text class="item-label">区间/站点</text>
					<text class="item-value">{{ detailObj.lineSiteSectionName }}</text>
				</view>
				<view class="pro-item">
					<text class="item-label">检查日期</text>
					<view class="item-value">
						<text v-if="detailObj.checkDate">{{ getDate(detailObj.checkDate) }}</text>
					</view>
				</view>
				<view class="pro-item" v-if="detailType === 'production'">
					<text class="item-label">发现隐患数量</text>
					<view class="item-value">
						<text class="day">{{ detailObj.hiddenDangerNum || 0}}项</text>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="item-picture-title">
					<text>{{ detailType === 'production' ? '运行执行检查表' : '消防器材巡视记录表' }}</text>
					<view class="picture-box">
						<u-album :urls="detailObj.imgs1" keyName="src" multipleSize="212rpx" v-if="detailObj.imgs1 && detailObj.imgs1.length > 0"></u-album>
						<view class="picture-empty" v-else>
							<img src="http://cdn.uviewui.com/uview/empty/data.png"  alt="" width="100px" height="100px">
							<text>暂无图片</text>
						</view>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="pro-item" v-if="detailType === 'production'">
					<text class="item-label">隐患整改数量</text>
					<view class="item-value">
						<text class="day">{{ detailObj.rectificationNum || 0}}项</text>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="item-picture-title">
					<text>{{ detailType === 'production' ? '隐患整改回复表' : '现场灭火器配备照片' }}</text>
					<view class="picture-box">
						<u-album :urls="detailObj.imgs2" keyName="src" multipleSize="212rpx" v-if="detailObj.imgs2 && detailObj.imgs2.length > 0"></u-album>
						<view class="picture-empty" v-else>
							<img src="http://cdn.uviewui.com/uview/empty/data.png"  alt="" width="100px" height="100px">
							<text>暂无图片</text>
						</view>
					</view>
				</view>
			</view>
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="pro-item" v-if="detailType === 'production'">
					<text class="item-label">带队检查负责人</text>
					<view class="item-value">
						<text>{{ detailObj.checkPerson }}</text>
					</view>
				</view>
				<view class="item-picture-title">
					<text>{{ detailType === 'production' ? '带队检查照片' : '用电安全巡视记录表' }}</text>
					<view class="picture-box">
						<view class="picture-box">
							<u-album :urls="detailObj.imgs3" keyName="src" multipleSize="212rpx" v-if="detailObj.imgs3 && detailObj.imgs3.length > 0"></u-album>
							<view class="picture-empty" v-else>
								<img src="http://cdn.uviewui.com/uview/empty/data.png"  alt="" width="100px" height="100px">
								<text>暂无图片</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/utils/mixins.js"
	export default {
		name:'production_detail',
		mixins: [mixins],
		props:{
			detailType:{
				type: String,
				default: 'production'
			},
			detailObj:{
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {	
			}
		},
		methods: {
			// 返回上一级
			goBack(url){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.production-detail-box {
		height: 100vh;
		background-color: #f5f7fb;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.box-item {
			.placeholder-box {
				height: 30rpx;
			}
			.container-item {
				padding-top: 20rpx;
				background-color: #fff;
			}
		}
	}
	.form-box-production {
		padding: 0 40rpx;
		background: #fff;
		.pro-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 30rpx 0;
			border-bottom: 4rpx solid #f4f6f9;
			// .item-label ::before {
			// 	content: "*";
			// 	color: #FF6A6A ;
			// }
			.item-label {
				font-size: 32rpx;
			}
			.item-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;
				color: #22204E;
				.item-time {
					margin-left: 30rpx;
					// padding-top: 10rpx;
				}
			}
			.item-value.long {
				display: block;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		.item-picture-title {
			padding: 30rpx 0;
			text {
				font-size: 32rpx;
			}
			// text ::before{
			// 	content: "*";
			// 	color: #FF6A6A ;
			// }
			.picture-box {
				margin-top: 20rpx;
				width: 100%;
				overflow-x: auto;
				display: flex;
				.item-picture {
					margin-right: 40rpx;
				}
			}
			
		}
	}
	.space-box {
		background-color: #f5f7fb;
		height: 40rpx;
	}
	.picture-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #c0c4cc;
		text {
			font-size: 28rpx;
		}
	}
</style>